<template>
  <div id="app">
    <van-nav-bar :fixed="true" title="首页" />
    <van-swipe class="my-swipe" :autoplay="3000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img v-lazy="image" />
      </van-swipe-item>
    </van-swipe>
    <van-search
      v-model="value"
      shape="round"
      placeholder="请输入搜索关键词"
      class="searchbar"
    />
    <van-grid :gutter="10" :column-num="3" :border="false">
      <van-grid-item
        v-for="(item, index) in gridtextlist"
        :key="index"
        :text="item.text"
        :icon="item.photo"
      />
    </van-grid>

    <div class="tab-center">
      <label for="" class="recommand-tag">推荐房源</label>
      <div>
        <label for="" class="tag-center">二手房 </label>
        <label for="" class="tag-right"> | 租房</label>
      </div>
    </div>
    <!-- <van-card
      num="5485.6元/平"
      price="750万"
      desc="3室1厅/80平/南北通透/鑫苑中央花园洋..."
      title="中间层三居室，户型方正，采 光好，明厨明卫，南北通透"
      thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
      @click="pushdetail"
    >
      <template #tags>
        <van-tag color="#00C48233" text-color="#00C482">地铁</van-tag>
        <van-tag color="#FF895733" text-color="#FF8957">满五年</van-tag>
        <van-tag color="#56C1FF33" text-color="#56C1FF">随时看房</van-tag>
        <van-tag color="#E75C6133" text-color="#E75C61">新上</van-tag>
      </template>
    </van-card>

    <van-card
      num="5485.6元/平"
      price="750万"
      desc="3室1厅/80平/南北通透/鑫苑中央花园洋..."
      title="中间层三居室，户型方正，采 光好，明厨明卫，南北通透"
      thumb="./assets/home.png"
    >
      <template #tags>
        <van-tag color="#00C48233" text-color="#00C482">地铁</van-tag>
        <van-tag color="#FF895733" text-color="#FF8957">满五年</van-tag>
        <van-tag color="#56C1FF33" text-color="#56C1FF">随时看房</van-tag>
        <van-tag color="#E75C6133" text-color="#E75C61">新上</van-tag>
      </template>
    </van-card>

    <van-card
      num="5485.6元/平"
      price="750万"
      desc="3室1厅/80平/南北通透/鑫苑中央花园洋..."
      title="中间层三居室，户型方正，采 光好，明厨明卫，南北通透"
      thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
      @click="pushdetail"
    >
      <template #tags>
        <van-tag color="#00C48233" text-color="#00C482">地铁</van-tag>
        <van-tag color="#FF895733" text-color="#FF8957">满五年</van-tag>
        <van-tag color="#56C1FF33" text-color="#56C1FF">随时看房</van-tag>
        <van-tag color="#E75C6133" text-color="#E75C61">新上</van-tag>
      </template>
    </van-card>

    <van-card
      num="5485.6元/平"
      price="750万"
      desc="3室1厅/80平/南北通透/鑫苑中央花园洋..."
      title="中间层三居室，户型方正，采 光好，明厨明卫，南北通透"
      thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
    >
      <template #tags>
        <van-tag color="#00C48233" text-color="#00C482">地铁</van-tag>
        <van-tag color="#FF895733" text-color="#FF8957">满五年</van-tag>
        <van-tag color="#56C1FF33" text-color="#56C1FF">随时看房</van-tag>
        <van-tag color="#E75C6133" text-color="#E75C61">新上</van-tag>
      </template>
    </van-card> -->

    <van-list
    >
      <van-cell v-for="(item,index) in list" :key="index">
        <van-card 
          :num= "item.unitPrice"
          :price = "item.totalPrice"
          :desc="item.content"
          :title="item.title"
          :thumb="item.pic"
          @click="pushdetail"
        >
          <template #tags>
            <van-tag color="#00C48233" text-color="#00C482">地铁</van-tag>
            <van-tag color="#FF895733" text-color="#FF8957">满五年</van-tag>
            <van-tag color="#56C1FF33" text-color="#56C1FF">随时看房</van-tag>
            <van-tag color="#E75C6133" text-color="#E75C61">新上</van-tag>
          </template>
        </van-card>
      </van-cell>
    </van-list>

    <div class="button-bottom" @click="clickMoreData">查看更多二手房</div>
  </div>
</template>

<script>
// import {NavBar, Button, Col, Row, Tabbar, TabbarItem,Swipe, SwipeItem } from 'vant';
import axios from "axios"; // 引入axios

export default {
  name: "Home",
  components: {
    // vanButton: Button,
    // vanCol: Col,
    // vanRow: Row,
    // vanTabbar: Tabbar,
    // vanTabbarItem:TabbarItem,
    // vanSwipe: Swipe,
    // vanSwipeItem: SwipeItem,
    // vanNavBar:NavBar,
  },
  data() {
    return {
      value: "",
      images: [
        "https://img01.yzcdn.cn/vant/apple-1.jpg",
        "https://img01.yzcdn.cn/vant/apple-2.jpg",
        "https://img01.yzcdn.cn/vant/apple-4.jpg",
        "https://img01.yzcdn.cn/vant/apple-4.jpg",
      ],
      list: [],
      gridtextlist: [
        {
          text: "二手房",
          icon: "n",
          photo: require("../assets/home.png"),
        },
        {
          text: "租房",
          icon: "w",
          photo: require("../assets/key.png"),
        },
        {
          text: "发布房源",
          icon: "j",
          photo: require("../assets/edit.png"),
        },
      ],
    };
  },
  methods: {
    clickMoreData() {
      this.$router.push("/housell");
    },
    pushdetail() {
      this.$router.push("/house");
    },
  },
  mounted() {
    this.$http.get("/mock/news").then((res) => {
      // url即在mock.js中定义的
      console.log(res); // 打印一下响应数据
      console.log(res.data); // 打印一下响应数据
    });

    this.$http.get("/estate/rent/list").then((res) => {
      this.list = res.data
    });
  },
};
</script>

<style scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  height: 200px;
  text-align: center;
}
.my-swipe .van-swipe-item img {
  width: 100%;
  height: 100%;
}

.searchbar {
  position: relative;
  top: -20px;
}
.searchbar.van-search {
  background-color: transparent;
}
.van-card__num {
  padding-left: 20px;
}
.van-card__bottom {
  display: flex;
  padding-top: 8px;
}
.van-card__price {
  color: #e75c61 !important;
}
.van-tag {
  margin-right: 5px;
}
.tab-center {
  display: flex;
  justify-content: space-between;
  padding: 0 15px;
}
.recommand-tag {
  font-size: 19px;
  font-family: Source Han Sans SC;
  font-weight: bold;
  color: #333333;
  line-height: 20px;
}
.tag-center {
  font-size: 14px;
  font-family: Source Han Sans SC;
  font-weight: bold;
  color: #e75c61;
  line-height: 20px;
}
.tag-right {
  font-size: 14px;
  font-family: Source Han Sans SC;
  font-weight: bold;
  color: #666666;
  line-height: 20px;
}
.button-bottom {
  margin: 20px 20px;
  height: 44px;
  background: #f1f1f1;
  border-radius: 22px;
  font-size: 15px;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: #e75c61;
  line-height: 44px;
  text-align: center;
}
</style>



